<template>
  <div>
    <br><br><br><br><br><br>
      <!-- <button @click=" getListDetail(5445314132);">获取歌单</button><br></br>
        <button @click="getSongDetail();">获取歌曲详情 </button> <br/> <button @click="playAll()">播放全部 </button><br/> -->
        <!-- <button @click="pre()">上一首</button><br/> <button @click="next()">下一首</button><br/> -->
        <!-- <button @click="changeMode()">{{modeMsg[mode]}}</button> -->
        <!-- <div>tracks: {{trackIds.length}}  playlist: {{playList.length}}</div>
        <div>tracks: {{trackIds}} <br/><br/> sonlist: {{songIds}}</div> -->
    <!-- <music-player :playList1="playList1" :playListIndex1="playListIndex1" /> -->
    <div class="FooterMusic">

      <!-- 版心 -->
      <div class="footerMusicContainer">
        <div class="footerLeft">
          <svg class="icon sys" aria-hidden="true" @click="pre()">
            <use xlink:href="#icon-shangyishou_huaban"></use>
          </svg>
          <svg
            class="icon zanting"
            aria-hidden="true"
            @click="play"
            v-if="isPause"
          >
            <use xlink:href="#icon-bofang_huaban"></use>
          </svg>
          <svg class="icon zanting" aria-hidden="true" @click="play" v-else>
            <use xlink:href="#icon-zanting_huaban"></use>
          </svg>
          <svg class="icon xys" aria-hidden="true" @click="next()">
            <use xlink:href="#icon-xiayishou_huaban"></use>
          </svg>
        </div>
        <div class="footerMiddle">
          <img
            class="footerImg" :src="picSrc"  alt=""  />
          <div class="play">
            <div class="playName">
              <span class="name">{{ name }}</span>
              <span class="mv">
                <span class="mvName">mv</span>
                <svg class="icon zanting" aria-hidden="true">
                  <use xlink:href="#icon-bofangMV"></use>
                </svg>
              </span>
            </div>
            <div class="playInput">
              <input
                class="range"
                type="range"
                min="0"
                :max="duration"
                step="0.5"
                v-model="currentTime"
                
                @change="handleTimeChange()"
              />
              <div class="time">
                <span>{{ time().ct }}</span> / <span>{{ time().dt }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="footerRight">
          <svg class="icon yinliang" aria-hidden="true">
            <use xlink:href="#icon-yinliang"></use>
          </svg>
          <div class="yl">
            <div class="block ylRange">
              <el-slider
                v-model="volume"
                :max="1"
                input-size="mini"
                :step="0.01"
                @input="addVolume()"
                :format-tooltip="handelVoice"
              >
              </el-slider>
            </div>
          </div>
          <svg class="icon liebiaoxunhuan" @click="changeMode()" aria-hidden="true">
            <use :xlink:href="modeClass[mode]"></use>
          </svg>
          <div class="lb" :hidden="!isShowItemList" >
              <div class="gd">
                <div class="itemList">
                  <div class="item" v-for="(item, i) in songsDetail" :key="i">
                    <div class="itemLeft" @click="playById(i)">
                      <span class="leftSpan">{{ i + 1 }}</span>
                      <div>
                        <span style="color:white;font-size: 16px;">{{ item.name }}</span>
                        <span
                          class="itemname" style="text-align: right;"
                          v-for="(item1, index) in item.ar"
                          :key="index"
                          >{{ item1.name }}</span
                        >
                      </div>
                    </div>
                    <div class="itemRight" @click="removeSong(i)">
                      &times;
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <svg class="icon bofangliebiao" aria-hidden="true" @click="isShowItemList = !isShowItemList">
            <use xlink:href="#icon-bofangliebiao"></use>
          </svg>
          <span style="font-size: 8px;">{{playList.length}}</span>
        </div>
      </div>
      <audio
        ref="audio" @ended="next();  this.currentTime = 0;"
        :src="currSrc" autoplay :loop="mode==1" 
      ></audio>
    </div>
  </div>
</template>

<script src="../../public/moment.js"></script>
<script>
import { getItemList } from "@/request/api/item";
// import ItemMusicList from "@/components/WnItemMusicList.vue";
import { mapMutations, mapState } from "vuex";
// import MusicPlayer from "./MusicPlayer.vue"
export default {
  // components: { ItemMusicList }, 
  data() {
    return {
      interVal: 0,
      volume: 1,
      duration:0,
      currentTime: 0,
      currTrackId: 0,
      currSongId: 0,

      index: 0,
      name: "",
      picSrc: "",
      isPause: true,
      isAuto: false,
      isNext: true,
      mode: 2,
      modeClass: ["#icon-liebiaoxunhuan", "#icon-danquxunhuan", "#icon-suijibofang"],
      isShowItemList:false,
      // prepareTimer: null,
    };
  },
  computed: {
    player() {
      return this.$refs.audio;
    },
    ...mapState([
      "playList1",
      "playListIndex1",
      "isbtnShow",
      // "duration",
      // "currentTime",
    ]),
    // currentTime: {
    //   set(value) {},
    // },
    currSrc() {
      if (this.playList.length == 0) {
        return "";
      }
      // var url =this.playList[this.index].url;
      // if (url == "" || url == null) {
      //   this.next();
      // }
      this.isPause = false;
      this.picSrc =  this.songsDetail[this.index].al.picUrl;
      this.name =  this.songsDetail[this.index].al.name;
      console.log(this.playList[this.index]);
      // console.log("tjb currSrc = " + this.playList[this.index].url);
      return `https://music.163.com/song/media/outer/url?id=${this.trackIds[this.index]}.mp3`
      // return this.playList[this.index].url;
    },
  },
  watch: {
    isPause (newValue, oldValue) {
       if(newValue == false) {
          this.currentTime = 0;
          this.autoUpdateTime();
       } else {
          clearInterval(this.interVal); // 暂停计时器
       }
    }

  },
  mounted() {
    // this.getItemList1()
    this.prepareAudio();
    // this.get();
  },
  // updated() {
  //   this.prepareAudio();
  //   this.addVolume();
  // },
  methods: {
    get() {
      // console.log(this.playList1[50].id)
    },
    // --------------------------------歌单歌曲开始-----------------------------------------
    // 获取歌单所有歌曲
    async getItemList1() {
      let res = await getItemList();
      console.log(res.data.songs);
      this.updateplayList1(res.data.songs);
      console.log("获取歌单所有歌曲数据:", res);
      // getItemList(1111, 50, 1)
    },
    // --------------------------------歌单歌曲结束-----------------------------------------
    // ...mapMutations([
    //   "updateIsBtnShow",
    //   "updateCurrentTime",
    //   "updateDuration",
    //   "updateplayList1",
    //   "updateplayListIndex1",
    // ]),

    // 判断音乐是否播放    (按键切换)
    play() {
      if(this.player.readyState != 4) {
        return;
      }
      if (this.player.paused) {
        this.player.play();
        // this.updateIsBtnShow(false);
        this.isPause = false;
        // this.updateTime(); //播放进行传值
      } else {
        this.player.pause();
        this.isPause = true;
        // this.updateIsBtnShow(true);
      }
    },

    realFormatSecond(second) {
      console.log("自动播放触发", second);
      // this.updateCurrentTime(second);
      this.currentTime = second;
      return realFormatSecond(second);
    },
    // 更新总时长
    prepareAudio() {
      var vue = this;
      this.prepareTimer = setInterval(() => {
        if (vue.player.readyState === 4) {
          // vue.updateCurrentTime(0);
          // vue.updateDuration(vue.player.duration);
          this.duration = vue.player.duration;
          vue.time();
          clearInterval(this.prepareTimer);
        }
      }, 200);
    },
    // 更新当前时间
    autoUpdateTime() {
      this.interVal = setInterval(() => {
      // this.updateCurrentTime(this.player.currentTime)
        this.currentTime = this.player.currentTime;
      }, 1000)
    },
    handleTimeChange() {
      this.player.currentTime = this.currentTime;
    },
    // 时长转分钟
    time() {
      // console.log("total: " + this.duration + " curr: " + this.currentTime);
      let dt = moment.unix(this.duration).format("mm:ss");
      let ct = moment.unix(this.currentTime).format("mm:ss");
      return { dt, ct };
    },

    // -----------------------------------------音量开始-----------------------------------
    // 拖动音量滚动条
    voiceChange() {
      this.player.volume = this.volume;
    },
    // 处理音量显示
    handelVoice() {
      return parseInt(this.volume.toFixed(2) * 100);
    },
    // 更新音量
    addVolume() {
      this.player.volume = this.volume;
    },
    // 拖曳音量处理音量显示
    handelVoice() {
      return parseInt(this.volume.toFixed(2) * 100);
    },
    getSongDetail() {
      if (this.trackIds.length == 0) {
        return;
      }
      let urlStr = this.trackIds.toString();
      this.axios.get("song/detail?ids=" + urlStr).then((res) => {
        console.log(JSON.stringify(res.data));
        this.songsDetail = res.data.songs;
        for (var i = 0 ; i < this.songsDetail.length; i++) {
          this.songIds.push(this.songsDetail[i].al.id);
        }
        console.log(this.songsDetail[0]);
      });
    },

    getUrls() {
      if (this.trackIds.length == 0) {
        return;
      }
      let urlStr = this.trackIds.toString();
      this.axios.get("song/url?id=" + urlStr).then((res) => {
        // console.log(JSON.stringify(res.data));
        this.playList = [];
        // this.playList = res.data.data;
        // this.trackIds = [];
        var playlist = res.data.data;
        for (var i = 0; i < playlist.length; i++) {
          // if (playlist[i].url != "" && playlist[i].url != null) {
            this.playList.push(playlist[i]);
            // console.log("tjb" + i + " url: " +playlist[i].url);
            // this.trackIds.push[playlist[i].id];
          // }
        }
        // console.log(JSON.stringify(this.playList));
      });
    },
    getListDetail(id) {
      this.axios.get("playlist/detail?id=" + id).then((res) => {
        // console.log(JSON.stringify(res.data));
        res.data.playlist.trackIds.forEach((track) => {
          this.trackIds.push(track.id);
        });
        // this.trackIds = res.data.playlist.trackIds;
        // console.log(JSON.stringify(this.trackIds));
      });
    },
    randomSong() {
      this.index = Math.floor(Math.random() * this.playList.length);
      console.log("random index = " + this.index);
    },
    next() {
      this.isAuto = true;
      if (this.mode == 2) {
        // 随机
        this.randomSong();
        return;
      }
      // 顺序或单曲
      this.index = this.index == this.playList.length - 1 ? 0 : ++this.index;

      console.log(this.index);
    },
    pre() {
      this.isAuto = true;
      if (this.mode == 2) {
        this.randomSong();
        return;
      }
      this.isNext = false;
      this.index = this.index == 0 ? this.playList.length - 1 : --this.index;
    },
    changeMode() {
      this.mode = this.mode == 2 ? 0 : this.mode + 1;
    },
    playAll() {
      this.getUrls();
    },
    playById(index){
      this.index = index;
    },
    removeSong(i) {
      if (this.index == i) {
        if (this.index == this.playList.length - 1) {
          this.index = 0;
          return
        }
        this.index++;
      }
      this.playList.splice(i, 1);
      this.trackIds.splice(i, 1);
      this.songIds.splice(i, 1);
      this.songsDetail.splice(i, 1);
 
      // playList: [],
      // trackIds: [],
      // songIds:[],
      // songsDetail:[],
    }
  },
  destroyed () {
    clearInterval(this.prepareTimer);;
  },
};
</script>

<style lang="scss" scoped>
.FooterMusic {
  user-select: none;
  z-index: 999;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px;
  background-image: linear-gradient(#4c4c4c, #2b2b2b);
  position: fixed;
  bottom: 0;
  .footerMusicContainer {
    width: 1100px;
    height: 100%;
    display: flex;
    margin: 0 auto;
    .footerLeft {
      width: 137px;
      height: 100%;
      color: #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
      .zanting {
        font-size: 40px;
      }
      .sys:hover,
      .xys:hover {
        font: 800;
        color: #fff;
      }
      .zanting:hover {
        font: 800;
        color: #fff;
      }
    }
    .footerMiddle {
      height: 100%;
      width: 666px;
      display: flex;
      align-items: center;
      .footerImg {
        height: 50px;
        border-radius: 50%;
        margin-left: 20px;
        box-shadow: 0 0 2px 2px #000;
      }
      .play {
        height: 100%;
        width: 596px;
        .playName {
          width: 100%;
          height: 30px;
          color: #ccc;
          display: flex;
          justify-content: space-between;
          .name {
            overflow: hidden;
            white-space: nowrap;
            margin-top: 8px;
            margin-left: 32px;
          }
          .mv {
            font-size: 18px;
            margin-right: 32px;
            margin-top: 8px;
            display: flex;
            .mvName {
              font-size: 16px;
            }
          }
        }
        .playInput {
          width: 100%;
          position: relative;
          .range {
            width: 80%;
            height: 4px;
            display: block;
            margin: 0 auto;
          }
          .time {
            color: #ccc;
            position: absolute;
            right: 15px;
            top: 12px;
            width: 100px;
          }
        }
      }
    }
    .footerRight {
      position: relative;
      width: 297px;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #ccc;
      font-size: 20px;
      .yinliang:hover,
      .liebiaoxunhuan:hover,
      .bofangliebiao:hover {
        color: #fff;
      }
      .block {
        position: absolute;
        bottom: 72px;
        left: 28px;
      }
      .yinliang:hover .yl {
        display: block;
        z-index: 30000;
      }
      .yl {
        width: 100px;
        height: 30px;
        border-radius: 2px;
        line-height: 100px;
        z-index: 2000;
        bottom: 72px;
        left: 58px;
        .ylRange {
          position: absolute;
          bottom: 51px;
          left: 37px;
          height: 3px;
          width: 100px;
          z-index: 2000;
        }
      }
      .lb {
        width: 250px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 70px;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        overflow: scroll;
      }
    }
  }
}
.el-slider__button {
  width: 10px !important;
  height: 10px !important;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
}


.gd {
  padding: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.itemList {
  padding: 10px;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .itemLeft,
    .itemRight {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      .leftSpan {
        color: #fafafa;
        padding: 10px;
        font-size: 12px;
      }

      .itemname {
        position:absolute;
        text-align:right;
        color: #77f011;
        font-size: 6px;
      }
    }
  }
}
</style>
